<template>
  <div>
    <div v-for="(itemyiji,indexyiji) in data" :key="indexyiji">
      <!--  一级-->
      <div class="itemyistryle" >
        <div @click="handleiconbox(itemyiji)" >
          <div :class="itemyiji.isicon?'iconStyle':'iconStyleactive'"></div>
          <div class="labelStryle">{{ itemyiji.label }}</div>
        </div>

        <div>
          <el-button type="text">{{itemyiji.chakan}}</el-button>
          <el-button type="text">{{itemyiji.tinajia}}</el-button>
          <el-button type="text">{{itemyiji.shanchu}}</el-button>
          <el-button type="text">{{itemyiji.bianji}}</el-button>
        </div>
      </div>
      <!--  二级-->
      <div v-for="(itemerji,indexerji) in itemyiji.children" :key="indexerji" style="margin-left: 20px" v-show="itemyiji.biaoshi">
        <div class="itemyistryle" @click="handleiconbox(itemerji)">
          <div :class="itemerji.isicon?'iconStyle':'iconStyleactive'"></div>
          <div class="labelStryle">{{ itemerji.label }}</div>
          <div>
            <el-button type="text">{{itemerji.tinajia}}</el-button>
          </div>
          <div>
            <el-button type="text">{{itemerji.shanchu}}</el-button>
          </div>
          <div>
            <el-button type="text">{{itemerji.bianji}}</el-button>
          </div>
        </div>
        <!--    三级-->
        <div v-for="(itemsanji,indexsanji) in itemerji.children" :key="indexsanji" style="margin-left: 20px"
             v-show="itemerji.biaoshi">
          <div class="itemyistryle" @click="handleiconbox(itemsanji)">
            <div :class="itemsanji.isicon?'iconStyle':'iconStyleactive'"></div>
            <div class="labelStryle">{{ itemsanji.label }}</div>
            <div>
              <el-button type="text">{{itemsanji.tinajia}}</el-button>
            </div>
            <div>
              <el-button type="text">{{itemsanji.shanchu}}</el-button>
            </div>
            <div>
              <el-button type="text">{{itemyiji.bianji}}</el-button>
            </div>
          </div>
          <!--四级-->
          <div v-for="(itemsiji,indexsiji) in itemsanji.children" :key="indexsiji" style="margin-left: 20px"
               v-show="itemsanji.biaoshi">
            <div class="itemyistryle" @click="handleiconbox(itemsiji)">
              <div :class="itemsiji.isicon?'iconStyle':'iconStyleactive'"></div>
              <div class="labelStryle">{{ itemsiji.label }}</div>
              <div>
                <el-button type="text">{{itemsiji.tinajia}}</el-button>
              </div>
              <div>
                <el-button type="text">{{itemsiji.shanchu}}</el-button>
              </div>
              <div>
                <el-button type="text">{{itemyiji.bianji}}</el-button>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        {
          label: '一级 1',
          tinajia: "添加",
          chakan:"查看",
          bianji: "编辑",
          shanchu: "删除",
          isicon: true,
          biaoshi: false,
          children: [{
            label: '二级 1-1',
            isicon: false,
            biaoshi:false,
            tinajia: "添加",
            bianji: "编辑",
            shanchu: "删除",
            children: [{
              label: '三级 1-1-1',
              tinajia: "添加",
              biaoshi: false,
              bianji: "编辑",
              shanchu: "删除",
              isicon: true,
              children: [{
                label: '四级 1-1-1',
                biaoshi: false,
                tinajia: "添加",
                bianji: "编辑",
                shanchu: "删除",
                isicon: true,
              }]
            }]
          }]
        },
        {
          label: '一级2',
          tinajia: "添加",
          bianji: "编辑",
          shanchu: "删除",
          isicon: true,
          biaoshi: false,
          children: [{
            label: '二级2',
            isicon: false,
            biaoshi:false,
            tinajia: "添加",
            bianji: "编辑",
            shanchu: "删除",
            children: [{
              label: '三级2',
              tinajia: "添加",
              biaoshi: false,
              bianji: "编辑",
              shanchu: "删除",
              isicon: true,
              children: [{
                label: '四级2',
                biaoshi: false,
                tinajia: "添加",
                bianji: "编辑",
                shanchu: "删除",
                isicon: true,
              }]
            }]
          }]
        }
      ],

    }
  },
  methods: {

    /**
     * 盒子样式控制
     * */
    handleiconbox(item) {
      this.filterChange(item)
    },
    handleCheckChange(data) {
      console.log(data, `handleCheckChange`);
    },
    //过滤数组中元素
    filterChange(itemData) {
      this.data.map((itemyi,) => {
        if (itemyi.label === itemData.label) {
          //控制图标
          itemyi.isicon = !itemyi.isicon
          //控制下一层
          itemyi.biaoshi = !itemyi.biaoshi
        } else {
          if (itemyi.children.length > 0) {
            itemyi.children.map(itemerji => {
              if (itemerji.label === itemData.label) {
                itemerji.isicon = !itemerji.isicon
                itemerji.biaoshi = !itemerji.biaoshi
              }
              else {
                if (itemerji.children.length>0) {
                  itemerji.children.map(itemsanji => {
                    if (itemsanji.label === itemData.label) {
                      itemsanji.isicon = !itemsanji.isicon
                      itemsanji.biaoshi = !itemsanji.biaoshi
                    }
                  })
                }

              }
            })
          }
        }
      })

    },
    //展示下一级菜单

  }
}
</script>
<style lang="less">
.itemyistryle {
  display: flex;
  width: 20%;
  line-height: 30px;
div{
  display:flex;
}
  .iconStyle {
    width: 0;
    height: 0;
    margin-top: 12px;
    border: 6px solid;
    cursor: pointer;
    border-left-color: #C0C4CC;
    border-right-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
  }

  .iconStyleactive {
    width: 0;
    height: 0;
    margin-top: 17px;
    border: 6px solid;
    cursor: pointer;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: #409EFF;
    border-bottom-color: transparent;
  }

  .labelStryle {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #FFF;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;

  }

}

</style>